import React,{useState,useEffect} from 'react'
import {useParams,useLocation,useRouteMatch} from 'react-router-dom'

const Detail = () => {
    const location=useLocation();
    const match=useRouteMatch();
    console.log(match)

    const {id}=useParams();
    //! useParams()返回的是一个对象，里面有id，可以直接解构出来
    //! 对象解构，属性名字必须严格一直，数组不需要一致，只需要对应索引位置相同 

    const [topic,setTopic]=useState({});//! 一条帖子，空对象

    useEffect(() => {
        fetch(`https://cnodejs.org/api/v1/topic/${id}`)
            .then(res=>res.json())
            .then(res=>{
                console.log(res);
                res&&setTopic(res.data);
            })
            .catch(err=>{
                console.log(err)
            })
    }, [])

    return (
        <ul>
            {
                <>
                    <div>
                        {/* 程序第一次进来先渲染一次，是个空对象，渲染完后才会去请求数据 */}
                        {/* 登录名:{topic.author&&topic.author.loginname}
                        <img src={topic.author&&topic.author.avatar_url} alt=""/> */}
                        {/* //!多层属性访问，加个问号，判断一下是否为空 */}
                        登录名:{topic.author?.loginname}
                        <img src={topic.author?.avatar_url} alt=""/>
                    </div>
                            {/* //!  HTML标签要用dangerouslySetInnerHTML 进行赋值 */}
                    <div dangerouslySetInnerHTML={{__html:topic.content}}></div>
                </>
            }
        </ul>
    )
}

export default Detail
